<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
    *{margin: 0;padding: 0;}
    body{background: #000;}
    .box{width: 600px;height: 400px;background: #fff;position: relative;margin: 100px auto;}
    img{width: 600px;height: 400px;}
    strong,p{width: 600px;height: 30px;background: rgba(80,80,80,0.6);line-height: 30px;font-size: 24px;text-align: center;color: #F9BC28;}
    strong{position: absolute;top: 0}
    p{position: absolute;bottom: 0}
    ul{width: 50px;position: absolute;top: 0;left: -60px;padding: 0;}
    li{list-style: none;width: 50px;height: 50px;margin-bottom: 10px;background: #666;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Box = document.getElementsByTagName('div');
      fun(Box[0],["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"],["图片1","图片2","图片3","图片4","图片5"],'onclick');
      fun(Box[1],["images/1.png","images/2.png","images/3.png","images/4.png"],["图片1","图片2","图片3","图片4"],'onmouseover');
      function fun(Box,arr1,arr2,ent){
        var Img = Box.getElementsByTagName('img')[0];
        var Sto = Box.getElementsByTagName('strong')[0];
        var P = Box.getElementsByTagName('p')[0];
        var Ul = Box.getElementsByTagName('ul')[0];
        var Li = Box.getElementsByTagName('li');
        var num = 0;
        for (var i = 0; i < arr1.length; i++) {
          Ul.innerHTML += "<li></li>" ;
        };//for (var i = 0; i < arr1.length; i++)
        function tal(){
          Img.src = arr1[num];
          Sto.innerHTML = 1 + num + "/" + arr1.length;
          P.innerHTML = arr2[num];
          for(var i = 0;i < Li.length;i++){
            Li[i].style.background = "";
          }
          Li[num].style.background = "#FCD13C";
        }//function tal()
        tal();
        for(var i = 0;i < Li.length;i++){
          Li[i].index = i;
          Li[i][ent] = function(){
            num = this.index;
            tal();
          }//Li[i].onclick
        }
      }//for(i = 0;i < Li.length;i++)
    }
  </script>
</head>
<body>
  <div class="box">
    <img src="">
    <strong>文字加载中......</strong>
    <p>文字加载中......</p>
    <ul></ul>
  </div>
  <div class="box">
    <img src="">
    <strong>文字加载中......</strong>
    <p>文字加载中......</p>
    <ul></ul>
  </div>
</body>
</html>